<template>
  <el-tabs model-value="基础信息"
           class="h-full">
    <el-tab-pane label="基础信息" name="基础信息" class="invisible-scroll" style="height: calc(100vh - 185px)">
      <el-collapse v-model="defaultExpanded">
        <el-collapse-item title="基本信息" name="基本信息">
          <el-form ref="loginFormRef" :model="workFlowData" :rules="basicInfoFormRules" size="default" label-width="96" class="">
            <el-form-item prop="name" label="流程名称">
              <el-input v-model="workFlowData.name" placeholder="请输入" clearable/>
            </el-form-item>
            <el-form-item prop="keyCode" label="流程key">
              <el-input v-model="workFlowData.keyCode" placeholder="请输入" clearable disabled/>
            </el-form-item>
            <el-form-item prop="customDefinitionCode" label="唯一编码">
              <template #label>唯一编码
                <el-popover placement="top-start" title="说明" width="300"
                            content="用户应自定义一个有意义的且易记忆的唯一编码，可在其他地方用此编码来发起流程。">
                  <template #reference>
                    <el-icon>
                      <QuestionFilled/>
                    </el-icon>
                  </template>
                </el-popover>
              </template>
              <el-input v-model="workFlowData.customDefinitionCode" placeholder="请输入" clearable style="width: 235px"/>
              <el-button size="small" text type="primary" class="pr-0" @click="()=>{workFlowData.customDefinitionCode='unique_'+new Date().getTime()}">生成</el-button>
            </el-form-item>
            <el-form-item prop="actualTableName" label="关联表单">
              <el-select v-model="workFlowData.actualTableName" placeholder="请选择" clearable style="">
                <el-option v-for="item in workflowFormOptions" :key="item.value" :label="item.label" :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-form>
        </el-collapse-item>
        <el-collapse-item v-if="false" title="用户参数" name="用户参数">
          <el-button size="small" type="primary" class="mb-2" @click="">添加用户参数</el-button>
          <el-table :data="workFlowData.userParams" border max-height="240" size="small">
            <el-table-column label="参数名" prop="name"/>
            <el-table-column label="参数值" prop="value"/>
            <el-table-column label="备注" prop="remark" width="90px" show-overflow-tooltip/>
            <el-table-column align="center" label="操作" width="90px">
              <template slot-scope="{ row, $index }">
                <el-button size="small" text type="primary" @click="">编辑</el-button>
                <el-button size="small" text type="primary" @click="">移除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-collapse-item>
        <el-collapse-item title="执行监听器(ExecutionListener)" name="执行监听器(ExecutionListener)">
          <template #title>
            <span class="mr-2">执行监听器(ExecutionListener)</span>
            <el-popover placement="top-start" title="执行监听器(ExecutionListener)" width="300"
                        content="执行监听器可以在流程实例、执行实例或任务实例的特定生命周期事件上触发。这些事件包括流程实例启动、结束，活动开始、结束，任务创建、分配、完成等。">
              <template #reference>
                <el-icon :size="18">
                  <QuestionFilled/>
                </el-icon>
              </template>
            </el-popover>
          </template>
          <el-button size="small" type="primary" class="mb-2" @click="openFormDialog('添加','执行监听', workFlowData.executionListener)">添加执行监听</el-button>
          <el-table :data="workFlowData.executionListener" border max-height="240" size="small">
            <el-table-column label="事件名称" prop="name" show-overflow-tooltip/>
            <el-table-column label="事件类型" prop="type" width="90px"/>
            <el-table-column align="center" label="操作" width="90px">
              <template slot-scope="{ row, $index }">
                <el-button size="small" text type="primary" @click="openFormDialog('编辑','执行监听', row)">编辑</el-button>
                <el-button size="small" text type="primary" @click="openFormDialog('删除','执行监听', row)">移除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-collapse-item>
        <el-collapse-item title="任务监听器(TaskListener)" name="任务监听器(TaskListener)">
          <template #title>
            <span class="mr-2">任务监听器(TaskListener)</span>
            <el-popover placement="top-start" title="任务监听器(TaskListener)" width="300"
                        content="任务监听器专门用于监听任务实例的生命周期事件，如任务创建、分配、完成等。">
              <template #reference>
                <el-icon :size="18">
                  <QuestionFilled/>
                </el-icon>
              </template>
            </el-popover>
          </template>
          <el-button size="small" type="primary" class="mb-2" @click="openFormDialog('添加','任务监听', workFlowData.taskListener)">添加任务监听</el-button>
          <el-table :data="workFlowData.taskListener" border max-height="240" size="small">
            <el-table-column label="事件名称" prop="name" show-overflow-tooltip/>
            <el-table-column label="事件类型" prop="type" width="90px"/>
            <el-table-column align="center" label="操作" width="90px">
              <template slot-scope="{ row, $index }">
                <el-button size="small" text type="primary" @click="openFormDialog('编辑','事件监听', row)">编辑</el-button>
                <el-button size="small" text type="primary" @click="openFormDialog('删除','任务监听', row)">移除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-collapse-item>
        <el-collapse-item title="事件监听(EventListener)" name="事件监听(EventListener)">
          <template #title>
            <span class="mr-2">事件监听(EventListener)</span>
            <el-popover placement="top-start" title="事件监听(EventListener)" width="300"
                        content="事件监听器可以监听更广泛的事件，包括流程引擎级别的事件，如流程部署、流程实例启动、任务创建等。">
              <template #reference>
                <el-icon :size="18">
                  <QuestionFilled/>
                </el-icon>
              </template>
            </el-popover>
          </template>
          <el-button size="small" type="primary" class="mb-2" @click="openFormDialog('添加','事件监听', workFlowData.eventListener)">添加事件监听</el-button>
          <el-table :data="workFlowData.eventListener" border max-height="240" size="small">
            <el-table-column label="事件名称" prop="name" show-overflow-tooltip/>
            <el-table-column align="center" label="操作" width="90px">
              <template slot-scope="{ row, $index }">
                <el-button size="small" text type="primary" @click="openFormDialog('编辑','事件监听', row)">编辑</el-button>
                <el-button size="small" text type="primary" @click="openFormDialog('删除','事件监听', row)">移除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-collapse-item>
      </el-collapse>
    </el-tab-pane>
    <el-tab-pane label="更多设置" name="更多设置" class="invisible-scroll" style="height: calc(100vh - 185px)">
      <el-collapse v-model="defaultExpanded">
        <el-collapse-item title="平台权限" name="平台权限">
          <el-form ref="loginFormRef" :model="workFlowData" :rules="basicInfoFormRules" size="default" label-width="90" class="">
            <el-form-item label="启用web端">
              <el-switch v-model="workFlowData.enableOnWeb"/>
            </el-form-item>
            <el-form-item label="启用移动端">
              <el-switch v-model="workFlowData.enableOnMobile"/>
            </el-form-item>
          </el-form>
        </el-collapse-item>
        <el-collapse-item title="提交人权限" name="提交人权限">
          <el-checkbox v-model="workFlowData.disableEffciency1" label="允许撤销审批中的申请" />
          <div class="text-gray-400 mb-2">第一个审批节点通过后，提交人仍可撤销申请（配置前已发起的申请不生效）</div>
          <el-checkbox v-model="workFlowData.disableEffciency2" label="允许撤销90天内通过的审批" />
          <div class="text-gray-400 mb-2">员工可申请撤销已通过的审批（配置前已通过的审批不可撤销）</div>
          <el-checkbox v-model="workFlowData.disableEffciency3" label="允许修改90天内通过的审批" />
          <div class="text-gray-400 mb-2">提交人可申请修改已通过的审批，用于销假等场景（仅可修改一次，配置前已发起的审批不可修改）</div>
          <el-checkbox v-model="workFlowData.disableEffciency4" label="允许代他人提交" disabled />
          <div class="text-gray-400">代提人和实际提交人都需在该审批的发起范围内，提交后将共享审批单后续状态</div>
        </el-collapse-item>
        <el-collapse-item title="效率统计" name="效率统计">
          <el-checkbox v-model="workFlowData.disableEffciency" label="该流程数据不纳入效率统计" />
          <div class="text-gray-400">在效率诊断（包括团队、个人、管理员看板）中排除该流程的审批耗时数据</div>
        </el-collapse-item>
<!--        <el-collapse-item title="提交人权限" name="提交人权限"></el-collapse-item>-->
<!--        <el-collapse-item title="提交人权限" name="提交人权限"></el-collapse-item>-->
<!--        <el-collapse-item title="提交人权限" name="提交人权限"></el-collapse-item>-->
      </el-collapse>
    </el-tab-pane>
  </el-tabs>
  <el-dialog v-model="dialogVisible"
             :close-on-click-modal="false"
             :title="dialogForm.title"
             destroy-on-close
             header-class="border-b"
             footer-class="border-t"
             class=""
             width="600px">
    <el-form ref="form" :model="dialogForm" :rules="dialogFormRules" label-width="80px" @submit.native.prevent>
      <el-form-item v-if="['执行监听','任务监听','事件监听'].includes(dialogForm.event)" label="事件名称" prop="name">
        <el-input v-model="dialogForm.name" clearable placeholder="请输入"/>
      </el-form-item>
      <el-form-item v-if="['执行监听','任务监听'].includes(dialogForm.event)" label="事件类型" prop="name">
        <el-input v-model="dialogForm.type" clearable placeholder="请输入"/>
      </el-form-item>
      <el-form-item label="处理脚本javascript">
        <epms2-ace-editor v-model="dialogForm.js"
                          lang="javascript"
                          :read-only="false"
                          class="border"
                          style="width: 100%; height: 300px;"/>
      </el-form-item>
    </el-form>
    <template #footer="{ close, titleId, titleClass }">
      <el-button text type="primary" @click="scriptHelpDrawerVisible = true">脚本如何写?</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitDialogForm">确 定</el-button>
    </template>
  </el-dialog>
  <el-drawer v-model="scriptHelpDrawerVisible"
             direction="ltr"
             title="脚本帮助"
             :size="500"
             header-class="mb-0"
             @open="onScriptHelpDrawerOpen">
    <template #default>
      <epms2-ace-editor v-model="scriptHelpDrawerContent"
                        lang="javascript"
                        :read-only="true"
                        font-size="14"
                        class="border"
                        style="width: 100%; height: 100%;"/>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="scriptHelpDrawerVisible=false">关闭</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup>
/////////////////////////////////   外部依赖导入    //////////////////////////
import {onMounted, onUnmounted, ref, reactive, defineProps, defineEmits, computed} from 'vue'
import {$localStorage} from "@/utils/application-storage.js";
import $apiService from "@/axios/api.js";
import {QuestionFilled} from "@element-plus/icons-vue";
import Epms2AceEditor from "@/components/epms2-ace-editor.vue";

/////////////////////////////////   组件参数    //////////////////////////
const props = defineProps({
  modelValue: {
    type: Object,
    required: true,
    default: () => ({
      name: '',
      customDefinitionCode: '',
      keyCode: '',
      actualTableName: '',
      executionListener: [],
      taskListener: [],
      eventListener: [],
    })
  }
});
const emits = defineEmits(['update:modelValue']);
const workFlowData = computed({
  get() {
    return props.modelValue;
  },
  set(newValue) {
    emits('update:modelValue', newValue);
  }
});

/////////////////////////////////   私有变量定义    //////////////////////////

const workflowFormOptions = ref([])
const defaultExpanded = ref(['基本信息', '流程权限'])
const basicInfoFormRules = reactive({
  name: [{required: true, message: '请输入账户', trigger: 'blur'}],
  keyCode: [{required: true, message: '请输入', trigger: 'blur'}],
  customDefinitionCode: [{required: true, message: '请输入', trigger: 'blur'}],
  actualTableName: [{required: true, message: '请选择', trigger: 'blur'}],
})
const dialogFormRules = reactive([])
const dialogForm = ref({
  title: ""
})
const dialogVisible = ref(false)
const scriptHelpDrawerVisible = ref(false)
const scriptHelpDrawerContent = ref()
const applicationList = ref([])

/////////////////////////////////   生命周期方法 //////////////////////////
onMounted(() => {
  getWorkflowFormOptions()
});
onUnmounted(() => {
});

/////////////////////////////////   页面方法    //////////////////////////
const getWorkflowFormOptions = () => {
  const data = {
    params: {
      actualFormType: 'ProcessForm',
      status: 'Enable',
    },
    all: true,
  }
  $apiService.getFormList(data).then((res) => {
    workflowFormOptions.value = res.data.data.content.map((item) => {
      const {formName, actualTableName} = item
      return {label: formName, value: actualTableName}
    })
  })
}
const submitDialogForm = () => {
}
const openFormDialog = (action, event, data) => {
  dialogForm.value.title = action + event
  dialogForm.value.event = event
  if (action === '添加') {
    dialogVisible.value = true
  }
  if (action === '编辑') {
    dialogVisible.value = true
  }
  if (action === '删除') {

  }
}
const onScriptHelpDrawerOpen = () => {
  if (scriptHelpDrawerContent.value) return
  $apiService.queryDefaultJsFunctionsInstruction().then((res) => {
    scriptHelpDrawerContent.value = res.data.data
  })
}
const onCommand = () => {
}
</script>

<style scoped>
</style>
